<template>
	<article class="kp-modifyPass" v-bind:style="{ height: pageHeight+'px' }">
		<div class="kp-mp-box">
			<div class="kp-mb-li">
				<input type="text" placeholder="手机号" v-model="phone" readonly class="kp_phone">
				<p>
					<button @click="phoneyz" v-if="is_card">{{yzm}}</button>
					<button v-else class="zmcolor">{{yzm}}</button>
				</p>
			</div>
			<div class="kp-mb-li mt-20">
				<input type="text" placeholder="验证码" v-model="yanz">
			</div>
			<h3>设置新密码</h3>
			<div class="kp-mb-li mt-20">
				<input type="password" placeholder="输入新密码" v-model="pass">
			</div>
			<div class="kp-mb-li mt-20">
				<input type="password" placeholder="确认新密码" v-model="passs">
			</div>
			<span class="kp-tip">密码必须为8-14位字母或数字</span>
			<button class="kp-post-form" @click="subMit">确认修改</button>
		</div>
	</article>
</template>

<script>
	import hex_md5 from "../../../public/md5"
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				disabledValue: '',
				pageHeight: '',
				phone: '', //手机号
				i: 60,
				is_card: true,
				yzm: '获取验证码',
				yanz:'',
				pass:'',
				passs:'',
			}
		},
		mounted() { //载入后执行
			var h = document.documentElement.clientHeight || document.body.clientHeight;
			this.pageHeight = h;
			if (this.userinfo.phone) {
				this.phone = this.userinfo.phone.replace(/^(\d{3})\d{4}(\d+)/, "$1****$2");
			}
		},
		created() { //创建后

		},
		watch: { //监听放置
		},
		methods: { //方法放置
			phoneyz() {
				//验证手机号
				this.is_card = false;
				let time = window.setInterval(() => {
					this.yzm = "剩余" + (this.i--) + "秒";
					if (this.i == -1) {
						window.clearInterval(time);
						this.is_card = true;
						this.yzm = "重新获取";
						this.i = 60;
					}
				}, 1000);
				let param = {
					phone: this.userinfo.phone,
					type: 'forget'
				};
				this.$http.post(
					this.$baseUrl.baseurl + 'kpcx/sendMsg',
					param
				).then(function(res) {
					console.log(res);

				}).catch(error => {

				});
			},
			subMit(){
				var zimu = /^[a-zA-Z]+$/
				var num = /^[0-9]+$/;
				if(this.yanz == ''){
					this.$toast('验证码不能为空');
					return false;
				}else if(this.pass == ''){
					this.$toast('新密码不能为空');
					return false;
				}else if(this.passs == ''){
					this.$toast('确认新密码不能为空');
					return false;
				}else if(this.pass.length<8 || num.test(this.pass)|| zimu.test(this.pass)){
					this.$toast('密码需要8到14位字母和数字');
					return false;
				}else if(this.passs != this.pass){
					this.$toast('新密码和确认新密码不一致');
					return false;
				}else{
					let param = {
						'newPassword':hex_md5.hex_md5(this.pass),
						'phone':this.userinfo.phone,
						'smsCode':this.yanz
					};
					let that = this;
					this.$http.post(
						this.$baseUrl.baseurl + 'kpcx/appPersonalCenter/changePassword',
						param
					).then(function(res) {
						console.log(res);
						if(res.data.Code == 0){
							that.$router.go(-1);
						}else{
							console.log(1)
							that.$toast(res.data.msg);
						}
					}).catch(error => {
	
					});
				}
				
			}
		},
		components: {

		},
		computed: mapGetters([
			'userinfo',
		]),
	}
</script>

<style scoped>
	/* //头像部分 */

	.kp-modifyPass {
		background: #f4f5f9;
	}

	.kp-mp-box {
		padding-top: 86px;
	}

	.kp-mb-li {
		height: 98px;
		margin-top: 32px;
		display: flex;
		padding: 0 30px;
		background: #fff;
	}

	.kp-mb-li input {
		flex: 1;
		border: none;
		font-size: 32px;
		color: #cbcbcb;
		background: #FFF;
		outline: none;
		margin-right: 30px;
	}

	.kp-mb-li p {
		flex: 1;
	}

	.kp-mb-li button {
		height: 65px;
		padding: 0 19px;
		font-size: 28px;
		background: #fff;
		color: rgb(59, 195, 194);
		margin-top: 17px;
		float: right;
		border: 1px solid rgb(59, 195, 194);
		border-radius: 4px;
		outline: none;
	}

	.kp-mp-box h3 {
		font-size: 30px;
		color: rgb(51, 51, 51);
		padding: 38px 0 8px 30px;
		font-weight: normal;
	}

	span.kp-tip {
		font-size: 28px;
		margin-top: 23px;
		color: rgb(183, 183, 183);
		display: block;
		padding: 0 30px;
	}

	.kp-post-form {
		background: #3bc3c2;
		width: 714px;
		height: 98px;
		border-radius: 15px;
		margin: 0 auto;
		border: none;
		display: block;
		outline: none;
		margin-top: 60px;
		font-size: 36px;
		color: #fff;
	}

	.kp-mb-li>input {
		color: rgb(51, 51, 51);
	}

	.kp-mb-li>input::-webkit-input-placeholder {
		color: rgb(169, 169, 169);
	}

	.kp-mb-li>input::-moz-placeholder {
		color: rgb(169, 169, 169);
	}

	.kp-mb-li>input::-ms-input-placeholder {
		color: rgb(169, 169, 169);
	}

	.kp-mb-li>.kp_phone {
		color: #666;
	}

	.kp-mb-li button.zmcolor {
		color: #666;
	}
</style>
